<template>
  <div class="left-wrapper">
    <ul v-if="!loading" class="mynav">
      <li :class="{active3:group.ctls.contains(ctl),active2:openGroups.contains(gind)}" v-for="(group,gind) in groups">
        <a href="javascript:;" @click.stop.prevent='toggleGroup(gind)'>
          <i class="ui icon" :class="{'folder':!openGroups.contains(gind),'folder open':openGroups.contains(gind)}"></i>
          {{group.title}}
        </a>
        <ul class="sub_ul">

          <li :class="{active:mem.ctl==activectl}" v-for="mem in group.mems">

            <router-link @click.stop.prevent="beforeLink" v-if="mem.route" :to="{path:mem.route}">{{mem.title}}

            </router-link>

            <router-link v-else :to="{path:`/page${addPathArray.indexOf(mem.ctl)>-1?'/add':''}`,query:{ctl:mem.ctl,title:mem.title}}">{{mem.title}}
            </router-link>


          </li>
        </ul>
      </li>
    </ul>
    <loading :loading="loading"></loading>
  </div>
</template>
<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import loading from 'components/dimmer/loading';
  import model from '_model';

  export default {
    data() {
      return {
        leftMenu: [],
        openGroups: [],
        groups: [],
		addPathArray:['ServiceCharge']
      }
    },
    methods: {
      beforeLink() {
      },
      toggleGroup(gind) {
        if (!this.openGroups.contains(gind)) {
          this.openGroups.push(gind);
        } else
          this.openGroups.remove(gind);
      },
      logout() {
        this.$parent.user = {}
      },
      getMenu(mid) {

        if (!mid) {
          if (this.top_mid)
            mid = this.top_mid;
          else {
            util.store.commit(this,'getMenuByCtl', this.ctl);
            let menu = util.store.get(this,'vuexRs');
            mid = menu ? menu.pid : 2;
          }

        }
        this.groups = [];

        model.Menu.getLeftMenus(this, mid);

      },
      setOpenGroup(){
        this.groups.map((group, index) => {
          if (group.ctls.contains(this.ctl) && !this.openGroups.contains(index)) {
            this.openGroups.push(index);
          }
        });
        if(!this.openGroups.contains(0))
          this.openGroups.push(0);
      }
    },
    computed: {
      loading() {

        return !this.groups.length > 0
      },
      ctl() {
        return this.$route.query.ctl;
      },
      top_mid() {
        return this.$route.query.top_mid;
      },
      activectl() {
        return this.$route.query.activectl || this.$route.query.ctl;
      }

    },
    watch: {
      ctl(val){
        this.setOpenGroup();
      },
      loading(val){
        if (!val)
          this.setOpenGroup();
      }
    },
    components: {loading},
    props: [],
    created() {
        this.getMenu()
      let eventVue = util.store.get(this,'eventVue');

      eventVue.$on('menuUpdate', this.getMenu)
    },
    mounted(){


    }
  }
</script>
<style rel="stylesheet/less" lang="less">@dir: "common/";
.left-wrapper {
  position: fixed;
  top: 62px;
  left: 0;
  bottom: 10px;
  width: 200px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  .mymenu {
  }
  .mynav {
    display: block;
    margin: 0;
    padding: 0;

    li {
      .ui.menu {
        margin-top: 0;
        margin-left: 15%;
      }
      list-style: none;
      &:first-child {
        padding-top: 10px;
        margin-top: 0;
      }
      margin-top: 5px;
      a {

        display: block;
        height: 50px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 50px;
        font-size: 16px;
        text-align: left;
        font-weight: 400;
        padding-left: 5%;
        box-sizing: border-box;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.1s linear;
      }
      a:hover {
        transition: all 0.1s linear;
        background-color: rgba(114, 182, 227, 0.5);
        font-size: 18px;

      }
      &.active, &.active2 {
        .sub_ul {
          display: block;
        }
      }
      .sub_ul {
        display: none;
        padding: 0;
        li {
          &:first-child {
            margin-top: 2px;
            padding-top: 0px;
          }
          padding-left: 40px;
          background-color: transparent;
          a {
            height: 30px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 30px;
            font-size: 12px;
            text-align: left;
            font-weight: 300;
            padding-left: 0px;
            background-color: transparent;
          }
          &:hover, &.active {
            transition: all 0.1s linear;
            background-color: rgba(114, 182, 227, 0.5);
            a {
              font-size: 14px;
              background-color: transparent;
            }
          }

        }

      }
    }
  }
}
</style>
